<template>
    <div class="air_box">
        <div class="air_header">
            <img src="../assets/image/air_bg.png" class="air_bg">
        </div>
        <div class="air_content">
            <mu-container class="air_con" fluid>
                <mu-row gutter>
                    <mu-col span="5" sm="5" md="5" lg="4" class="air_list">
                        <mu-row class="air_show">
                            <mu-col span="8" sm="8" md="8" lg="8" class="dd-clearfix">
                                <div class="air_num" v-show="timeshow"><span>{{showtimenum | dub}}</span><i>h</i></div>
                                <div class="air_num" v-show="!timeshow"><span>{{showtempnum}}</span><i>°C</i></div>
                            </mu-col>
                            <mu-col span="4" sm="4" md="4" lg="4" class="air_plan">
                                <mu-row class="iconbox" id="iconbox1">
                                    <mu-col span="3" sm="3" md="3" lg="3" class="air_icon" v-for="(item,index) in iconarr" :class="{active:index == air1num}" @click="tab(index)">
                                        <svg class="icon" aria-hidden="true">
                                            <use v-bind:xlink:href =  item.icons></use>
                                        </svg>
                                    </mu-col>
                                </mu-row>
                                <mu-row class="dd-clearfix wind_speed">
                                    <mu-col span="4" sm="4" md="4" lg="4" class="wind_name">风速</mu-col>
                                    <mu-col span="1" sm="1" md="1" lg="1" class="wind_num active" id="one_wind"></mu-col>
                                    <mu-col span="1" sm="1" md="1" lg="1" class="wind_num" id="two_wind"></mu-col>
                                    <mu-col span="1" sm="1" md="1" lg="1" class="wind_num" id="three_wind"></mu-col>
                                </mu-row>
                            </mu-col>
                        </mu-row>
                        <mu-row class="air_plan_btn dd-clearfix">                          
                            <mu-col span="4" sm="4" md="4" lg="4" @click="timing" class="air_bottom_btn" :class="{active:shows==1}">
                                <div class="border">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href = "#icon-dingshi"></use>
                                    </svg>
                                </div>
                                <span class="name">定时</span>
                            </mu-col>
                            <mu-col span="4" sm="4" md="4" lg="4" @click="tempadd" class="air_bottom_btn" :class="{active:shows==2}">
                                <div class="border">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href = "#icon-icon10"></use>
                                    </svg>
                                </div>
                                <span class="name">温度加</span>
                            </mu-col>
                            <mu-col span="4" sm="4" md="4" lg="4" @click="tempreduce" class="air_bottom_btn" :class="{active:shows==3}">
                                <div class="border">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href = "#icon-jian" ></use>
                                    </svg>
                                </div>
                                <span class="name">温度减</span>
                            </mu-col>
                            <mu-col span="4" sm="4" md="4" lg="4" @click="closeopen" class="air_bottom_btn" :class="{active:open}">
                                <div class="border">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href = "#icon-kaiguan" ></use>
                                    </svg>
                                </div>
                                <span class="name">开关</span>
                            </mu-col>
                            <mu-col span="4" sm="4" md="4" lg="4" @click="modulebtn" class="air_bottom_btn" :class="{active:shows==5}">
                                <div class="border">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href = "#icon-iconfontmoshi" ></use>
                                    </svg>
                                </div>
                                <span class="name">模式</span>
                            </mu-col>
                            <mu-col span="4" sm="4" md="4" lg="4" @click="speedbtn" class="air_bottom_btn" :class="{active:shows==6}">
                                <div class="border">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href = "#icon-caozuofengsufengnuan" ></use>
                                    </svg>
                                </div>
                                <span class="name">风速</span>
                            </mu-col>
                        </mu-row>
                    </mu-col>
                    <mu-col span="5" sm="5" md="5" lg="4" class="air_list" style="margin-left:7%;">
                        <mu-row class="air_show">
                            <mu-col span="8" sm="8" md="8" lg="8" class="dd-clearfix">
                                <div class="air_num" v-show="timeshow2"><span>{{showtimenum2 | dub}}</span><i>h</i></div>
                                <div class="air_num" v-show="!timeshow2"><span>{{showtempnum2}}</span><i>°C</i></div>
                            </mu-col>
                            <mu-col span="4" sm="4" md="4" lg="4" class="air_plan">
                                <mu-row class="iconbox" id="iconbox2">
                                    <mu-col span="3" sm="3" md="3" lg="3" class="air_icon" v-for="(item,index) in iconarr2" :class="{active:index == air2num}" @click="tab2(index)">
                                        <svg class="icon" aria-hidden="true">
                                            <use v-bind:xlink:href =  item.icons></use>
                                        </svg>
                                    </mu-col>
                                </mu-row>
                                <mu-row class="dd-clearfix wind_speed">
                                    <mu-col span="4" sm="4" md="4" lg="4" class="wind_name">风速</mu-col>
                                    <mu-col span="1" sm="1" md="1" lg="1" class="wind_num active" id="four_wind"></mu-col>
                                    <mu-col span="1" sm="1" md="1" lg="1" class="wind_num" id="five_wind"></mu-col>
                                    <mu-col span="1" sm="1" md="1" lg="1" class="wind_num" id="six_wind"></mu-col>
                                </mu-row>
                            </mu-col>
                        </mu-row>
                        <mu-row class="air_plan_btn dd-clearfix">                          
                            <mu-col span="4" sm="4" md="4" lg="4" @click="timing2" class="air_bottom_btn" :class="{active:shows2==1}">
                                <div class="border">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href = "#icon-dingshi"></use>
                                    </svg>
                                </div>
                                <span class="name">定时</span>
                            </mu-col>
                            <mu-col span="4" sm="4" md="4" lg="4" @click="tempadd2" class="air_bottom_btn" :class="{active:shows2==2}">
                                <div class="border">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href = "#icon-icon10"></use>
                                    </svg>
                                </div>
                                <span class="name">温度加</span>
                            </mu-col>
                            <mu-col span="4" sm="4" md="4" lg="4" @click="tempreduce2" class="air_bottom_btn" :class="{active:shows2==3}">
                                <div class="border">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href = "#icon-jian" ></use>
                                    </svg>
                                </div>
                                <span class="name">温度减</span>
                            </mu-col>
                            <mu-col span="4" sm="4" md="4" lg="4" @click="closeopen2" class="air_bottom_btn" :class="{active:open2}">
                                <div class="border">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href = "#icon-kaiguan" ></use>
                                    </svg>
                                </div>
                                <span class="name">开关</span>
                            </mu-col>
                            <mu-col span="4" sm="4" md="4" lg="4" @click="modulebtn2" class="air_bottom_btn" :class="{active:shows2==5}">
                                <div class="border">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href = "#icon-iconfontmoshi" ></use>
                                    </svg>
                                </div>
                                <span class="name">模式</span>
                            </mu-col>
                            <mu-col span="4" sm="4" md="4" lg="4" @click="speedbtn2" class="air_bottom_btn" :class="{active:shows2==6}">
                                <div class="border">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href = "#icon-caozuofengsufengnuan" ></use>
                                    </svg>
                                </div>
                                <span class="name">风速</span>
                            </mu-col>
                        </mu-row>
                    </mu-col>
                </mu-row>
            </mu-container>
        </div>
        <div class="back_footer">
            <img src="../assets/image/danger_bottom_bg.png" class="danger_bottom_bg">
            <div class="back_btn dd-fr" v-on:click="back">
                <img src="../assets/image/danger_btn.png">
                <span>返回主页</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return{
                showtimenum:0.5,
                showtempnum:20,
                timeshow:false,
                timeshow2:false,
                showtempnum2:21,
                showtimenum2:1,
                open:false,
                open2:false,
                air1:[
                    {
                        id:'time1',
                        svg:'#icon-dingshi',
                        font:"定时"
                    },
                    {
                        id:'add1',
                        svg:'#icon-icon10',
                        font:'温度加'
                    },
                    {
                        id:'reduce1',
                        svg:'#icon-jian',
                        font:'温度减'
                    },
                    {
                        id:'open1',
                        svg:'#icon-kaiguan',
                        font:'开关'
                    },
                    {
                        id:'module1',
                        svg:'#icon-iconfontmoshi',
                        font:'模式'
                    },
                    {
                        id:'speed1',
                        svg:'#icon-caozuofengsufengnuan',
                        font:'风速'
                    },
                ],
                air1num:1,
                air2num:2,
                air2:[
                    {
                        id:'time2',
                        svg:'#icon-dingshi',
                        font:"定时"
                    },
                    {
                        id:'add2',
                        svg:'#icon-icon10',
                        font:'温度加'
                    },
                    {
                        id:'reduce2',
                        svg:'#icon-jian',
                        font:'温度减'
                    },
                    {
                        id:'open2',
                        svg:'#icon-kaiguan',
                        font:'开关'
                    },
                    {
                        id:'module2',
                        svg:'#icon-iconfontmoshi',
                        font:'模式'
                    },
                    {
                        id:'speed2',
                        svg:'#icon-caozuofengsufengnuan',
                        font:'风速'
                    },
                ],
                iconarr:[
                    {id:1,icons:'#icon-icon15'},
                    {id:2,icons:'#icon-ai250'},
                    {id:3,icons:'#icon-shuidi2'}
                ],
                iconarr2:[
                    {id:1,icons:'#icon-icon15'},
                    {id:2,icons:'#icon-ai250'},
                    {id:3,icons:'#icon-shuidi2'}
                ],
                shows:'',
                shows2:'',
            }          
        },
        methods:{
            back(){
                this.$router.go(-1);//返回上一层
            },
            tab(index) {
                this.air1num = index;
            },
            tab2(index) {
                this.air2num = index;
            },
            timing() {
                this.shows = 1;
                this.timeshow=true;
                if(this.showtimenum == 3.0) {
                    this.showtimenum=0.5;
                }else {
                    this.showtimenum+=0.5;
                }           
            },
            timing2() {
                this.shows2 = 1;
                this.timeshow2=true;
                if(this.showtimenum2 == 3.0) {
                    this.showtimenum2=0.5;
                }else {
                    this.showtimenum2+=0.5;
                }           
            },
            tempadd() {
                this.shows = 2;
                this.timeshow=false;
                if(this.showtempnum == 30){
                    this.showtempnum = 30
                }else {
                    this.showtempnum+=1;
                }
            },
            tempadd2() {
                this.shows2 = 2;
                this.timeshow2=false;
                if(this.showtempnum2 == 30){
                    this.showtempnum2 = 30
                }else {
                    this.showtempnum2+=1;
                }
            },
            tempreduce() {
                this.shows = 3;
                this.timeshow=false;
                if(this.showtempnum == 17){
                    this.showtempnum = 17;
                }else {
                    this.showtempnum-=1;
                }
            },
            tempreduce2() {
                this.shows2 = 3;
                this.timeshow2=false;
                if(this.showtempnum2 == 17){
                    this.showtempnum2 = 17;
                }else {
                    this.showtempnum2-=1;
                }
            },
            closeopen() {
                this.open = !this.open;
            },
            closeopen2() {
                this.open2 = !this.open2;
            },
            modulebtn() {
                this.shows = 5;
                var maxIndex = $("#iconbox1 .air_icon").length-1;
                var minIndex = this.air1num;
                if(this.air1num < maxIndex){
                     this.air1num++;
                }else {
                    this.air1num = 0;
                }                
            },
            modulebtn2() {
                this.shows2 = 5;
                var maxIndex = $("#iconbox2 .air_icon").length-1;
                if(this.air2num < maxIndex){
                     this.air2num++;
                }else {
                    this.air2num = 0;
                }               
            },
            speedbtn() {
                this.shows = 6;
                if($('#one_wind').next().next().hasClass("active")){
                   $('#one_wind').addClass("active").siblings().removeClass("active");
                   return;
                }
                if($('#one_wind').next().hasClass("active")){
                     $('#one_wind').next().next().addClass("active");
                     return;
                }else{
                    $('#one_wind').next().addClass("active");
                    return;
                }
            },
            speedbtn2() {
                this.shows2 = 6;
                if($('#four_wind').next().next().hasClass("active")){
                   $('#four_wind').addClass("active").siblings().removeClass("active");
                   return;
                }
                if($('#four_wind').next().hasClass("active")){
                     $('#four_wind').next().next().addClass("active");
                     return;
                }else{
                    $('#four_wind').next().addClass("active");
                    return;
                }
            }
        },
    }
</script>

<style lang="scss">

//主题
@import '~@/assets/style/theme/default.scss';
//样式
@import '~@/assets/style/style.scss';

</style>